import base from "../base.js";
import cinemasApi from "../../api/cinemas.js";

export default class extends base {
    constructor(props) {
        super(props)
        this.data = {
            cinemas: {
                name: "",
                address: "",
                phone: "",
                status: "",
            }
        };
    }
    render() {
        const { name, address, phone, status } = this.data.cinemas;
        this.$el.html(`
        <div>
          <h1 style="text-align:center">新增影院</h1>
        <div class="layui-form"  lay-filter="formTest">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">影院名</label>
                <div class="layui-input-block">
                    <input type="text" value="${name}" style="width:500px" name="name" lay-verify="title" autocomplete="off" placeholder="请输入影院名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">影院地址</label>
                <div class="layui-input-block">
                    <input type="text" value="${address}" style="width:500px" name="address" lay-verify="title" autocomplete="off" placeholder="请输入影院地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">联系方式</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="${phone}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入联系方式" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">是否营业</label>
                <div class="layui-input-block">
                    <input type="text" name="status" value="${status}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入“是”或“否”" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">影院图片</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload" disabled style="background-color:rgba(0,0,0,0.2)">上传图片</button>
                </div>  
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn saveBtn" id="saveBtn" lay-submit="" lay-filter="demo1">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
         </div>
        </div>    
        `);
        this.saveBtnEle = $("#saveBtn");
        this.uploadBtnEle = $("#upload");
    }
    //新增方法
    async crerte() {
        this.data.cinemas.status = this.data.cinemas.status == "是" ? "true" : "false";
        console.log(this.data.cinemas);
        this.data.cinemas = await cinemasApi.create(this.data.cinemas);
        if (this.data.cinemas) {
            window.alert(`新建成功！芜湖！`);
            this.uploadBtnEle.removeAttr("disabled");
            console.log(this.uploadBtnEle);
            this.uploadBtnEle.css({"background": "blue"});
        };
    }
    imgs() {
        location.hash = `#/info/cinimgs/${this.data.cinemas._id}`;
    }
    handle() {
        _.forIn(this.data.cinemas, (v, k) => {
            $(`input[name=${k}]`).on("input", e => {
                this.data.cinemas[k] = e.target.value;
            });
        });
        this.saveBtnEle[0].addEventListener("click", this.crerte.bind(this));
        this.uploadBtnEle[0].addEventListener("click", this.imgs.bind(this))
    }
}